{% extends "profile/base.html" %}

{% block title %}查看用户资料 - {{ user.nickname or user.username }}{% endblock %}

{% block extra_css %}
<style>
    .profile-page {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: calc(100vh - 200px);
        padding: 2rem 0;
    }
    
    .profile-avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .profile-sidebar {
        background: #fff;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
        transition: transform 0.3s ease;
    }
    
    .profile-sidebar:hover {
        transform: translateY(-5px);
    }
    
    .card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.3s ease;
        margin-bottom: 1.5rem;
    }
    
    .card:hover {
        transform: translateY(-5px);
    }
    
    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 1.5rem;
    }
    
    .badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 500;
    }
    
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .info-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    
    .info-value {
        background-color: #f8f9fa;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        border-left: 4px solid #667eea;
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-page">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <div class="text-center fade-in">
                    <h1 class="display-4 fw-bold text-white mb-3">用户资料</h1>
                    <p class="lead text-white-50">查看 {{ user.nickname or user.username }} 的详细信息</p>
                </div>
            </div>
        </div>
        
        <div class="row fade-in">
            <div class="col-md-4">
                <div class="profile-sidebar">
                    <div class="mb-3">
                        {% if user.avatar %}
                        <img src="{{ url_for('profile.uploaded_file', filename=user.avatar) }}" class="profile-avatar" alt="用户头像">
                        {% else %}
                        <div class="profile-avatar d-flex align-items-center justify-content-center bg-light text-secondary">
                            <i class="fas fa-user fs-1"></i>
                        </div>
                        {% endif %}
                    </div>
                    <h5>{{ user.nickname or user.username }}</h5>
                    <p class="text-muted">{{ user.email }}</p>
                    
                    <div class="mb-3">
                        <span class="badge {% if user.is_public %}bg-success{% else %}bg-secondary{% endif %}">
                            {% if user.is_public %}公开资料{% else %}私有资料{% endif %}
                        </span>
                    </div>
                </div>
            </div>
            
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-id-card me-2"></i>基本信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="info-label">用户名</div>
                                <div class="info-value">{{ user.username }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-label">昵称</div>
                                <div class="info-value">{{ user.nickname or '未设置' }}</div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="info-label">邮箱</div>
                                <div class="info-value">{{ user.email }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-label">年龄</div>
                                <div class="info-value">{{ user.age or '未设置' }}</div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="info-label">性别</div>
                                <div class="info-value">
                                    {% if user.gender == 'male' %}男
                                    {% elif user.gender == 'female' %}女
                                    {% elif user.gender == 'other' %}其他
                                    {% else %}未设置{% endif %}
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-label">手机号</div>
                                <div class="info-value">{{ user.phone or '未设置' }}</div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="info-label">出生日期</div>
                                <div class="info-value">{{ user.birth_date.strftime('%Y-%m-%d') if user.birth_date else '未设置' }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-label">注册时间</div>
                                <div class="info-value">{{ user.created_at.strftime('%Y-%m-%d %H:%M') if user.created_at else '未知' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>详细信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="info-label">地址</div>
                            <div class="info-value">{{ user.address or '未设置' }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="info-label">兴趣爱好</div>
                            <div class="info-value">{{ user.interests or '未设置' }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="info-label">个人网站</div>
                            <div class="info-value">
                                {% if user.website %}
                                <a href="{{ user.website }}" target="_blank">{{ user.website }}</a>
                                {% else %}
                                未设置
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="info-label">个人简介</div>
                            <div class="info-value">
                                {{ user.bio or '这个人很懒，什么都没有留下...' }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-cog me-2"></i>账户信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="info-label">账户状态</div>
                                <div class="info-value">
                                    {% if user.is_active %}
                                    <span class="badge bg-success">活跃</span>
                                    {% else %}
                                    <span class="badge bg-danger">已禁用</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="info-label">最后更新</div>
                                <div class="info-value">{{ user.updated_at.strftime('%Y-%m-%d %H:%M') if user.updated_at else '未知' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化动画
        const elements = document.querySelectorAll('.fade-in');
        elements.forEach((el, index) => {
            setTimeout(() => {
                el.style.opacity = '1';
                el.style.transform = 'translateY(0)';
            }, index * 100);
        });
    });
</script>
{% endblock %}